import React, { Component } from "react";
// withRouter用于拿到路由信息的高阶组件
import { Link, Route, Switch, withRouter } from "react-router-dom";

class Home extends Component {
  render() {
    // console.log(this.props);
    return <div>这是home组件</div>;
  }
}

class About extends Component {
  render() {
    // console.log(this.props);
    return <div>这是About组件</div>;
  }
}

// const About = () => {
//   return <div>这是About组件</div>;
// };

// class Mine extends Component {
//   render() {
//     return <div>这是Mine组件</div>;
//   }
// }

const Mine = () => {
  return <div>这是Mine组件</div>;
};

@withRouter
class Show extends Component {
  render() {
    console.log(this.props);
    return <div>这是Show组件</div>;
  }
}
// const Show = withRouter((props) => {
//   console.log(props);
//   return <div>这是Show组件</div>;
// });

class App extends Component {
  render() {
    return (
      <>
        <h2>react-router-组件的渲染</h2>
        <ul>
          <li>
            <Link to="/home">首页</Link>
          </li>
          <li>
            <Link to="/about">关于页</Link>
          </li>
          <li>
            <Link to="/mine">我的页</Link>
          </li>
          <li>
            <Link to="/show">演出页</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          {/* 在Route里面，最常见的渲染组件的方式是使用component属性 */}
          {/* component属性是既能渲染类组件，也能渲染函数组件 */}
          <Route path="/home" component={Home}></Route>

          {/* 还可以使用render属性进行组件的渲染，用render不能渲染类组件 */}
          {/* 只能渲染函数组件 */}
          {/* render里面可以写函数，那么就可以在render的函数里面写逻辑和判断 */}
          <Route
            path="/about"
            render={(props) => {
              return <About {...props} />;
            }}
          ></Route>

          {/* 还可以使用children属性来渲染组件 */}
          {/* 在有Switch的情况下，children属性的效果和render属性是完全一样的 */}
          {/* 在没有Switch的情况下，children属性对应的组件不管是否匹配都会被渲染 */}
          <Route path="/mine" children={Mine}></Route>

          {/* 可以直接在Route组件的内部，将组件实例化，既可以用类组件，也可以用函数组件 */}
          {/* 插槽的方式 */}
          {/* 但是这种做法拿不到路由信息 */}
          <Route path="/show">
            <Show />
          </Route>
        </Switch>
      </>
    );
  }
}

export default App;
